<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //1.创建axios实例
        let axiosInstance = axios.create({
            baseURL:'http://localhost:8080',//基本的URL
            timeout:1000,//超时时间
            headers:{'Content-Type':'application/json'}//请求头
        });
        //请求拦截器拦截请求配置对象，修改请求配置对象
        //响应拦截器可以拦截响应对象，修改响应对象
        //请求拦截器使用一个新的成功拦截函数和失败拦截函数
        axiosInstance.interceptors.request.use((config)=>{
            //给原来的headers中添加一个新的header
            config.headers= {...config.headers,'Content-Type':'application/x-www-form-urlencoded'};
            return config;
        },(error)=>{
            console.error(error);
            return Promise.reject(error);
        });
        //再添加一个响应拦截器
        axiosInstance.interceptors.response.use((response)=>{
            //直接返回响应对象中的data属性，这样的话在promise的成功回调中就不再需要.data
            return response.data;
        },(error)=>{
            //如果错误对象中有response属性，说明响应已经获取到了，但是状态码不是2xx
            if(error.response){
                console.log(error.response.status)
                console.log(error.response.statusText)
                //如果没有response,但是有请求对象，说明请求已经发出，但是服务器没响应
            }else if(error.request){
                console.log(error.request)
            }else{
                //说明请求根本根本就没有发出，请求就没有创建成功
                console.log(error.message)
            }
            return Promise.reject(error);
        });
        axiosInstance.get('/users')
        .then(response=>console.log(response))
        .catch(error=>console.log(error))
    </script>
</body>
</html>